<template>
  <div>
    <!-- 自建订单  渠道维护 -->
    <el-dialog class="pick-dialog" title="自有渠道管理" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="960px">
      <div class="" v-loading="loading">
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="68px">
          <!-- <el-form-item label="类型" prop="num">
            <el-radio-group v-model="queryParams.zulinType" @change="zulinTypeChange">
              <el-radio :label="1">我的卡位</el-radio>
              <el-radio :label="2" v-if="checkPermi(['phoneManage:wozude'])">租用的卡位</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="类型" prop="type">
            <el-select disabled v-model="queryParams.type" placeholder="请选择">
              <el-option label="包赔商" :value="1" />
              <el-option label="平台渠道" :value="2" />
              <el-option label="供货商" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入" clearable size="small" />
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="success" icon="el-icon-plus" @click="openAdd">新增</el-button>
          </el-form-item>
        </el-form>
        <div class="tip">请双击名称进行选择！</div>
        <div class="table_box table_box_new">
          <el-table border :data="tableData.records" height="calc(100vh - 400px)" highlight-current-row  @current-change="handleCurrentChange" @cell-dblclick="dbClick">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="type" label="类型">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type==1" type="">包赔商</el-tag>
                <el-tag v-if="scope.row.type==2" type="warning">平台渠道</el-tag>
                <el-tag v-if="scope.row.type==3" type="warning">供货商</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="添加时间"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="remark" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="delRow(scope.row)">删除</el-button>
              </template>

            </el-table-column>

          </el-table>
        </div>
        <!-- <div class="pages-box">
          <el-pagination @current-change="pageChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 40, 50, 60]" :page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="tableData.total"></el-pagination>
        </div> -->
        <div class="center" style="margin-top: 10px;">
          <el-button @click="close('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        </div>
      </div>
      <addDialog ref="addDialog" @add="getList"></addDialog>
    </el-dialog>

  </div>
</template>

<script>
import otherChannels from "@/api/retrieveManage/otherChannels"
import addDialog from "./addQudao.vue";
export default {
  name: "selectPhone",
  components: { addDialog },
  data() {
    return {
      activeName: "0",
      listOne: [],
      dialogVisiblese: false,
      dialogVisible: false,
      names: "",
      xilie: [],
      loading: false,
      gameInfo: "",
      tableData: {
        records: [],
        total: 0,
      },
      queryParams: {
        isPage: 2,
        pageNum: 1,
        pageSize: 10,
        type:1
      },
      currentRow: null,
      nameyouxi: "",
    };
  },
  created() {},
  methods: {
 
    open(type) {
      this.queryParams.type = type||1
      this.dialogVisible = true;
      this.getList();
    },
 
    // 打开新增弹窗
    openAdd() {
      this.$refs.addDialog.open('',this.queryParams.type||1);
    },
    // 改变类
    zulinTypeChange(e) {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 获取列表
    getList() {
      this.loading = true;
      otherChannels.getQudaoList(this.queryParams).then((response) => {
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
          this.loading = false;
        });
    },
    // 删除一条
    delRow(row){
      this.$confirm(`删除后不可恢复，确认删除【${row.name}】吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          otherChannels.delQudaoById(row.id).then((res) => {
            this.$message.success(res.msg);
            this.getList();
          });
        })
        .catch(() => {});

    },
    // 页码改变
    pageChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 双击直接选择
    dbClick(row) {
      this.currentRow = row;
      this.submitForm();
    },
    // 选择项改变
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    submitForm() {
      if (!this.currentRow) {
        return this.$alert("请选择一条记录！");
      }
      this.$emit("change", this.currentRow);
      this.close();
    },
    close() {
      this.tableData.records = [];
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  color: red;
}
.twos {
  width: 100%;
  padding: 11px 20px;
  border: 1px solid #f2f2f2;
}
.bangding-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .bditem {
    margin-right: 20px;
    cursor: pointer;
    color: $primary;
    &:last-child {
      margin-right: 0;
    }
  }
}

.table_box{
  min-height: 391px;
}
</style>
